<template>
    <div>
        <div style="border: 1px solid #ccc; ">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </div>
      <el-button type="primary" @click="check">点击</el-button>
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { SlateElement } from '@wangeditor/editor'
import axios from 'axios'
    export default {
        name: "Test",
      components: { Editor, Toolbar },
      data(){
        return{
          editor: null,
          html: '',
          toolbarConfig: { },
          editorConfig: { MENU_CONF: {}, placeholder: "请输入内容..." },
          mode: 'default', // or 'simple'
      }

      },
      created() {
       let user=  localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):''
        var that = this;
        this.editorConfig.placeholder = "请输入使用说明内容...";
        this.editorConfig.MENU_CONF["uploadImage"] = {
          timeout: 5 * 1000, // 5s
          fieldName: "image",
          headers: {
            "Content-Type": "multipart/form-data",
            Authorization: "Bearer " + user.token
          },
          maxFileSize: 10 * 1024 * 1024, // 10M

          base64LimitSize: 5 * 1024, // 5kb 以下插入 base64

          onBeforeUpload(files) {
            return files; // 返回哪些文件可以上传
            // return false 会阻止上传
          },
          onProgress(progress) {
            console.log("onProgress", progress);
          },
          onSuccess(file, res) {
            console.log("onSuccess", file, res);
          },
          onFailed(file, res) {
            alert(res.message);
            console.log("onFailed", file, res);
          },
          onError(file, err, res) {
            alert(err.message);
            console.error("onError", file, err, res);
          },


          // 用户自定义上传图片
          customUpload(file, insertFn) {
            const files = new File([file], "file.jpg", {type: file.type, lastModified: Date.now()})
            let formData = new FormData();
            formData.append('file', files)
            axios.post('/file/editor/load', formData).then(r => {


              insertFn(r.data.data.url, "使用说明", r.data.data.url); //插入图片

            })

          }
        };
      },

      methods: {
        check(){
          console.log(this.html)
         this.editorConfig.MENU_CONF['uploadImage'] = {
            server: '/file/upload',
          }
        },


        onCreated(editor) {

          this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
      },
      mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        // setTimeout(() => {
        //   this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        // }, 1500)
      },
      beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
      }

    }
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scope>

.dark {
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
  /* ...其他... */
}
</style>
